<template>
    <div class="invoiceAnce">
        <div class="headerBox">
            <van-icon size=".48rem" color="#000000" name="arrow-left" style="margin-left: .15rem;"
                @click="backClick()" />
            <van-icon size=".48rem" color="#000000" name="cross" style="margin-left: .15rem;" />
            <span class="title-span">电子发票</span>
            <img class="bgImg" src="../../../assets/images/invoice/issuance01.png" alt="">
        </div>
        <div class="tab-div">
            <img src="../../../assets/images/invoice/ane01.png" alt="">
        </div>
        <div class="timeDiv">
            <img src="../../../assets/images/invoice/ane02.png" alt="">
        </div>
        <p class="txtP">2024年3月</p>
        <div class="cardDiv">
            <div class="itemDiv">
                <img src="../../../assets/images/invoice/ace04.png" alt="">
                <button @click="kaijuBtn()">开具</button>
            </div>

        </div>
        <div class="cardDiv">
            <div class="itemDiv">
                <img src="../../../assets/images/invoice/ace05.png" alt="">
                <button>开具</button>

            </div>

        </div>
        <div class="cardDiv">
            <div class="itemDiv">
                <img src="../../../assets/images/invoice/ace06.png" alt="">
                <button>开具</button>

            </div>

        </div>
        <div class="cardDiv">
            <div class="itemDiv">
                <img src="../../../assets/images/invoice/ace07.png" alt="">
                <button>开具</button>

            </div>

        </div>
        <div class="footer">
            <img src="../../../assets/images/invoice/ace08.png" alt="" style="margin-right: 0.22rem;">
            <img src="../../../assets/images/invoice/ace09.png" alt="">
        </div>
    </div>
</template>
<script>
export default {
    name: 'invoiceAnce',
    data() {
        return {}
    },
    methods: {
        backClick() {
            this.$router.push("/invoice");

        },
        kaijuBtn(){
            this.$router.push("/invoiceIssuance"); 
        }
    }
}
</script>
<style lang="less" scoped>
.invoiceAnce{
    width: 100%;
    height: 100%;
    overflow: auto;
        overflow-x: hidden;
    .headerBox {
            width: 100%;
            height: .88rem;
            line-height: .88rem;
            background: linear-gradient(180deg, #E2F0FF 0%, #F7F8F9 100%);
    
            .title-span {
                font-weight: bold;
                font-size: 0.36rem;
                color: #000;
                margin-left: 1.66rem;
            }
    
            img.bgImg {
                width: 2.36rem;
                height: 2.61rem;
                position: absolute;
                right: 0;
            }
        }
        .tab-div{
            width: 100%;
            position: relative;
            img{
                width: 100%;
            }
        }
        .timeDiv{
            width: 100%;
            height: auto;
            margin: 0 0.3rem 0 0.3rem;
            img{
                width: 6.15rem
            }
        }
        .txtP{
            width: auto;
            height: auto;
            font-size: 0.28rem;
            color: #333333;
            margin-left: .4rem;
            margin-top: 0.42rem;
            margin-bottom: 0.2rem;
            font-weight: normal;
        }
        .footer{
            width: 100%;
            height: auto;
            text-align: center;
            img{
                width: 3.34rem;
                height: 0.8rem;
            }
        }
        .cardDiv{
            width: auto;
            height: auto;
            margin: 0 0.3rem;
            position: relative;
            .itemDiv{
                width: 100%;
                button{
                    width: 1.2rem;
                    height: 0.56rem;
                    background: #2892FF;
                        border-radius: 0.1rem;
                        font-size: 0.26rem;
                            color: #FFFFFF;
                            border: none;
                            position: absolute;
                            top: 0.52rem;
                            right: 0.3rem;
                }
                img {
                        width: 100%;
                    }
            }
            
        }
}

</style>
